<!--
el-rate的默认值是0 比较不好用，我希望是null
-->
<template>
  <div>
      <i :class="icon" :style="{verticalAlign:'middle',color:color,backgroundColor:bgColor,fontSize:fontSize}"></i>
      <el-tag v-bind="$attrs" v-on="$listeners" v-html="myHtml" v-if="showTag"><slot></slot></el-tag>
  </div>
</template>

<script>
export default {
    name: 'mc-remote-icon',
    data () {
        return {
            myHtml:"",
            showTag:true,
            color:"",
            bgColor:"",
            fontSize:this.mcFontSize+"px",
            icon:this.mcIcon,
            marginTop:"10px",
        }
    },
    props:{
        //此处的value 就是父亲的v-model
        'mcRemoteUrl':{type:String,default:null},
        'mcTextField':{type:String,default:null},
        'mcIconField':{type:String,default:null},
        'mcColorField':{type:String,default:null},
        'mcBgColorField':{type:String,default:null},
        'mcContentType':{type:String,default:null},
        'mcFontSize':{type:Number,default:31},
        'mcIcon':{type:String,default:'el-icon-star-off'},
        //刷新时间
        'mcIntervalSeconds':{type:Number,default:null},
    },
    mounted () {
        if(this.$slots.default && this.$slots.default.length>0){
            var slot = this.$slots.default[0].text;
            this.myHtml = slot;
            this.showTag = true;
        }else{
            this.showTag = false;
        }
        this.refresh();
        if(this.mcIntervalSeconds){
           var intervalTimer = window.setInterval(() => {
             this.refresh();
           }, this.mcIntervalSeconds*1000);

           this.$once('hook:beforeDestroy', () => {
             window.clearInterval(intervalTimer);
           })
           //布局器会主动清理此定时任务 避免重复注册
           if(!window._mcCacheIntervals){
             window._mcCacheIntervals=[];
           }
           window._mcCacheIntervals.push(intervalTimer)
        }
    },
    methods:{
        refresh(){
            var request = this.$magicaltool.request;
            var _t = this;
            if(this.mcRemoteUrl){
                request.axios({contentType:this.mcContentType,$vue:this,method:"get",url:this.mcRemoteUrl,params:{}})
                  .then(function(res) {
                  var data = res.data;
                  if(data){
                    if(_t.mcTextField){
                        if(typeof data[_t.mcTextField]!='undefined' && data[_t.mcTextField]!=='' && data[_t.mcTextField]!==null){
                          _t.myHtml = data[_t.mcTextField];
                          _t.showTag = true;
                        }else{
                          _t.showTag = false;
                        }
                    }

                    if(_t.mcIconField && data[_t.mcIconField]){
                      _t.icon = data[_t.mcIconField];
                    }
                    if(_t.mcColorField && data[_t.mcColorField]){
                      _t.color = data[_t.mcColorField];
                    }

                    if(_t.mcBgColorField && data[_t.mcBgColorField]){
                      _t.bgColor = data[_t.mcBgColorField];
                    }
                  }

                }).catch(function (error) {
                  console.log(error)
                });
            }
        }
    }
}
</script>

<style lang="scss">

</style>
